<template>
	<TitleView text="我的" />
	<view class="card-box">

		<view class="boxs info-box">
			<view class="" style="display: flex;justify-content: space-between;">
				<view class="" style="display: flex;align-items: center;">
					<uv-avatar size="100rpx" src="https://via.placeholder.com/200x200.png/2878ff"></uv-avatar>
					<text style="padding-left:10rpx;font-size:35rpx;font-weight: bolder;
				">{{newdata.info.name}}</text>
				</view>
				<uv-icon name="arrow-right"></uv-icon>
			</view>
			<view class="" style="margin: 20rpx 0">
				<uv-line></uv-line>
			</view>
			<view class="" style="display: flex;justify-content: space-between;">
				<view class="we-box">
					<text>{{newdata.info.weight }}</text>
					<text class="two-title">当前(公斤)</text>
				</view>
				<view class="we-box">
					<text>{{newdata.info.weight }}</text>
					<text class="two-title">目标(公斤)</text>
				</view>
				<view class="we-box">
					<text>{{newdata.info.weight }}</text>
					<text class="two-title">BMI</text>
				</view>
			</view>
		</view>

		<view class="boxs one-box" style="margin-top: 30rpx;">

			<view class="" v-for="(item,index) in mainbox" :key="index">
				<view class="mian-box" :style="{backgroundColor:item.color}">
					<image src="/static/icon.png" mode="aspectFit" style="width: 45rpx;height: 45rpx;"></image>
				</view>
				<text>{{item.name}}</text>
			</view>
		</view>

		<view class="boxs two-box" style="margin-top:30rpx">
			<view class="" v-for="(item,index) in listbox" :key="index" :style="{borderBottom:index==3?'none':''}">
				<view class="two-left">
					<image src="/static/icon.png" mode="aspectFit" style="width:45rpx;height: 45rpx;"></image>
					<text>{{item.name}}</text>
				</view>

				<uv-icon name="arrow-right" color="#C8C8C8"></uv-icon>
			</view>
		</view>
		<view class="boxs two-box" style="margin-top:30rpx">
			<view class="" v-for="(item,index) in quitbox" :key="index" :style="{borderBottom:index==1?'none':''}">
				<view class="two-left">
					<image src="/static/icon.png" mode="aspectFit" style="width:45rpx;height: 45rpx;"></image>
					<text>{{item.name}}</text>
				</view>

				<uv-icon name="arrow-right" color="#C8C8C8"></uv-icon>
			</view>
		</view>



		<view class="shadow-box left-box">

		</view>
	</view>

</template>
<script setup>
	import {
		reactive
	} from 'vue';
	import TitleView from '@/components/TitleView.vue'


	const newdata = reactive({
		info: {
			avatar: "",
			name: "张三",
			weight: 121,
			targetWeight: 11,
			bmi: 10.4
		},

	})


	const mainbox = [{
			name: '我的消息',
			icon: '',
			color: "#FFE0ED"
		}, {
			name: '我的收藏',
			icon: '',
			color: "#fbf5d4"
		},
		{
			name: '我的数据',
			icon: '',
			color: "#e2e8ff"
		},
		{
			name: '绑定营养师',
			icon: '',
			color: "#dbf5f2"
		},

	]


	const listbox = [{
			name: "健康测评",
			icon: ""
		}, {
			name: "健康方案",
			icon: ""
		},
		{
			name: "商务合作",
			icon: ""
		},
		{
			name: "联系客服",
			icon: ""
		}
	]


	const quitbox = [{
		name: '设置',
		icon: ""
	}, {
		name: '账号退出',
		icon: ''
	}]
</script>
<style>
	page {
		background-color: #FAFBFD;
		overflow: visible !important;
	}
</style>
<style lang="scss" scoped>
	.one-box {
		min-height: 200rpx;
		// width: 700rpx;
		display: flex;
		justify-content: space-around;

		>view {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: $uni-font-size-base;
			font-weight: 500;

			.mian-box {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 70rpx;
				height: 70rpx;
				border-radius: 50rpx;
			}

			text {
				display: inline-block;
				margin-top: $uni-spacing-col-base;
			}
		}
	}

	.two-box {
		box-sizing: border-box;
		padding: $uni-spacing-col-lg ;

		>view {
			min-height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #F9F9F9;

			.two-left {
				text {
					padding-left: $uni-spacing-row-sm;
				}
			}
		}
	}

	.info-box {
		box-sizing: border-box;
		padding: $uni-spacing-col-lg $uni-spacing-row-lg;

		.we-box {
			width: 25%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: $uni-font-size-lg;

			.two-title {
				font-size: 24rpx;
				padding-top: $uni-spacing-col-sm;
				color: #B9B9B9;
			}
		}
	}


	.boxs {
		min-height: 200rpx;
		// width: 700rpx;
		background-color: #fff;
		margin: 0 auto;
		border-radius: $uni-border-radius-lg;

		view {
			display: flex;
			align-items: center;
			font-weight: 600;
		}
	}


	.shadow-box {
		width: 40%;
		height: 600rpx;
		position: fixed;
		top: 0;
		z-index: -700;
	}

	.left-box {
		left: 0;
		top: 0;
		border-radius: 0 50rpx 200rpx 0;
		// background: linear-gradient(145deg, rgb(227, 251, 225), #F// AFBFD);
		background: linear-gradient(65deg, #f0faf4, #EAFBEB, #f8fafc);
		// background: linear-gradient(60deg, #f0faf4, #f5f9f7, #f8fafc);
	}

	.right-box {

		position: absolute;
		width: 200rpx;
		height: 200rpx;
		bottom: 0 !important;
		// border-radius: 200rpx 0rpx 0rpx 50rpx;
		background: linear-gradient(65deg, #f0faf4, #EAFBEB, #f8fafc);
		right: 0rpx;
	}
</style>